WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > MVVM API > Worked Example - Styling Axis in MVVM
Worked Example - Styling Axis in MVVM

Axes can be styled in MVVM by registering a style in XAML and referencing it from the ViewModel.

To do this, you need to declare a Style (TargetType = NumericAxis, or your chosen axis type) in XAML and give it a key. Next, set the NumericAxisViewModel.StyleKey property equal to the key in XAML. Scichart picks it up and applies the style automatically to the axis!

View (XAML)

Styling Axis in MVVM
Copy Code 
<Window x:Class="Styling_AxisMvvm.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        xmlns:local="clr-namespace:Styling_AxisMvvm"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="MajorGridLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Red"/>
        </Style>
        <Style x:Key="MinorGridLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="#55FFFFFF"/>
        </Style>
        <Style x:Key="MajorTickLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="X2" Value="10"/>
        </Style>
        <Style x:Key="MinorTickLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="#55FFFFFF"/>
            <Setter Property="X2" Value="3"/>
        </Style>
        <Style x:Key="XAxisStyle" TargetType="{x:Type s:NumericAxis}">
            <Setter Property="MajorGridLineStyle" Value="{StaticResource MajorGridLineStyle}"/>
            <Setter Property="MinorGridLineStyle" Value="{StaticResource MinorGridLineStyle}"/>
            <Setter Property="MajorTickLineStyle" Value="{StaticResource MajorTickLineStyle}"/>
            <Setter Property="MinorTickLineStyle" Value="{StaticResource MinorTickLineStyle}"/>
            <Setter Property="AutoTicks" Value="False"/>
            <Setter Property="MajorDelta" Value="2"/>
            <Setter Property="MinorDelta" Value="0.5"/>
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="BorderBrush" Value="OrangeRed"/>
            <Setter Property="TickTextBrush" Value="Red"/>
            <Setter Property="AxisBandsFill" Value="#554682B4"/>
        </Style>
        <Style x:Key="YXAxisStyle" TargetType="{x:Type s:NumericAxis}">
            <Setter Property="MajorGridLineStyle">
                <Setter.Value>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="BlueViolet"/>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="MinorGridLineStyle">
                <Setter.Value>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="SkyBlue"/>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="MajorTickLineStyle">
                <Setter.Value>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="BlueViolet"/>
                        <Setter Property="X2" Value="10"/>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="MinorTickLineStyle">
                <Setter.Value>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="SkyBlue"/>
                        <Setter Property="X2" Value="3"/>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="AutoTicks" Value="False"/>
            <Setter Property="MajorDelta" Value="1"/>
            <Setter Property="MinorDelta" Value="0.2"/>
            <Setter Property="TickTextBrush" Value="BlueViolet"/>
            <Setter Property="AxisBandsFill" Value="#554682B4"/>
        </Style>
    </Window.Resources>
    <Grid>
        <s:SciChartSurface x:Name="sciChart"
                           Grid.Column="1"
                           ClipModifierSurface="True"
                           Padding="0"
                           XAxes="{s:AxesBinding XAxes}"
                           YAxes="{s:AxesBinding YAxes}">
            <s:SciChartSurface.RenderSurface>
                <s:HighQualityRenderSurface/>
            </s:SciChartSurface.RenderSurface>
        </s:SciChartSurface>
    </Grid>
</Window>

ViewModel

Styling Axis in MVVM
Copy Code 
    public class MainWindowViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<IAxisViewModel> XAxes { get; set; }
        public ObservableCollection<IAxisViewModel> YAxes { get; set; }
        public MainWindowViewModel()
        {
            XAxes = new ObservableCollection<IAxisViewModel>();
            YAxes = new ObservableCollection<IAxisViewModel>();
            InitializeAxes();
        }
        private void InitializeAxes()
        {
            var xNumAxis = new NumericAxisViewModel
            {
                AxisAlignment = AxisAlignment.Bottom,
                AxisTitle = "Styled XAxis",
                TextFormatting = "0.00#",
                VisibleRange = new DoubleRange(0, 10),
                StyleKey = "XAxisStyle",
            };
            XAxes.Add(xNumAxis);
            var yNumAxis = new NumericAxisViewModel
            {
                AxisTitle = "Styled YAxis",
                TextFormatting = "0.0#",
                VisibleRange = new DoubleRange(0, 5),
                StyleKey = "YXAxisStyle"
            };
            YAxes.Add(yNumAxis);
        }
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }